<template>
  <div class="v-editor-model-dropdown-search">
    <MDropdown
      :placement="placement"
      @visible-change="handleVisibleChange"
    >
      <div class="g-jc-sb g-pd-l-8 g-pointer">
        <div class="g-flex-1 g-one-line">
          <div v-if="modelValue">
            <div
              v-for="item in modelValue"
              :key="item.id"
              @contextmenu="propertyModelContextMenu($event, item)"
            >
              <span
                v-if="item.icon"
                class="g-m-l-4"
              >
                <img :src="item.icon" />
              </span>
              <span
                v-if="item.name"
                class="g-m-l-4"
              >
                {{ item.name }}
              </span>
            </div>
          </div>
        </div>
        <div
          v-if="selected && !row.readonly && !isModelDisabled"
          class="g-flex-0 g-pd-lr-4"
        >
          <img
            src="statics/icons/app/iconlist2.png"
            @click="handleClick"
          />
        </div>
      </div>
      <template #dropdown>
        <div>
          <el-input
            v-model="query"
            @input="handleInput"
          />
        </div>
        <div
          v-loading="loading"
          style="min-height: 40px; max-height: 200px; overflow: auto"
        >
          <MDropdownMenuItem
            v-for="(item, index) in filteredOptionList"
            :key="index"
            class="_selected"
            @click="handleClickItem(item)"
          >
            <img
              :src="item.icon"
              style="height: 16px"
            />
            <span class="g-pd-lr-8">{{ item.name }}</span>
          </MDropdownMenuItem>
        </div>
      </template>
    </MDropdown>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, inject, Ref } from "vue";
import { ModelValue, PropertyRow } from "../../types";
import MDropdown from "@/common/dropdown/Dropdown.vue";
import MDropdownMenuItem from "@/common/dropdown/DropdownMenuItem.vue";
import { ModelSelectOption } from "@/constants/types";
import { propertyUtil } from "../../PropertyUtil";
import { propertyModelContextMenu } from "../propertyUtil";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
}>();

const query = ref("");
const loading = ref(false);
const loaded = ref(false);
const optionList = ref<ModelSelectOption[]>(new Array(10).fill({ name: "", instanceId: "", icon: "" }));
const filteredOptionList = computed(() => {
  if (query.value) {
    return optionList.value.filter(it => it.name?.includes(query.value));
  } else {
    return optionList.value;
  }
});

const modelValue = computed(() => {
  const value = props.row.value as ModelValue[] | null;
  return value || "";
});
const clientY = ref(0);
const placement = computed(() => {
  return window.screenTop + window.innerHeight - clientY.value - 300 < 0 ? "top" : "bottom";
});
const handleClick = (target: MouseEvent) => {
  clientY.value = target.clientY;
};
// const icon = computed(() => {
//   const value = props.row.value as  ModelValue | null;
//   return value?.icon || '';
// });

function loadOptions() {
  loading.value = true;
  propertyUtil
    .getSelectOptions(props.row)
    .then(data => {
      optionList.value = data;
      loaded.value = true;
    })
    .finally(() => {
      loading.value = false;
    });
}

function handleVisibleChange(visible: boolean) {
  if (visible && !loaded.value) {
    loadOptions();
  }
}
function handleClickItem(item: ModelSelectOption) {
  propertyUtil.updatePropertyAndFresh(props.row, item.instanceId);
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/theme.scss";
.v-editor-model-dropdown-search {
  ._selected {
    background: $theme-color;
  }
}
</style>
